<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> New Document </title>
    <meta charset="utf-8">
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 12px / 1.8 "微软雅黑", "宋体";
        }

        form, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, p {
            list-style: none outside none;
        }

        a {
            color: #CCCCCC;
            outline: medium none;
            text-decoration: none;
        }
/*position: absolute;*/
        #help {
            top:0px;
            position: fixed;
            z-index: 5555;
            width: 100%;
            height: 100%;
            background: none rgba(0, 0, 0, 0.7)
        }

        #help .close {
            float: right;
            font-size: 40px;
            color: #fff;
            width: 60px;
            height: 40px;
            line-height: 36px;
            text-align: center;
            background: none
        }

        #help .close:hover {
            background: none rgba(0, 0, 0, 0.7)
        }

        #help .step {
            position: absolute;
            color: #eee;
            padding: 0 20px 15px;
            background: none rgba(0, 0, 0, 0.7);
            border-radius: 5px;
            display: none
        }

        #help .step .jt {
            font-size: 0;
            height: 0;
            border: 20px solid rgba(0, 0, 0, 0);
            position: absolute
        }

        #help .step .jt_left {
            border-right: 20px solid rgba(0, 0, 0, 0.7)
        }

        #help .step .jt_right {
            border-left: 20px solid rgba(0, 0, 0, 0.7)
        }

        #help .step .jt_top {
            border-bottom: 20px solid rgba(0, 0, 0, 0.7)
        }

        #help .step .jt_bottom {
            border-top: 20px solid rgba(0, 0, 0, 0.7)
        }

        #help .step .h1 {
            font-size: 40px;
            font-weight: bold
        }

        #help .step .h2 {
            font-size: 28px;
            font-weight: bold;
            padding-left: 10px
        }

        #help .step .next,
        #help .step .over {
            border: 1px solid #fff;
            color: #fff;
            padding: 0 5px;
            float: right;
            margin-top: 10px
        }

        #help .step .next:hover,
        #help .step .over:hover {
            background: none rgba(50, 50, 50, 0.7)
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var template = function (c, g) {
            return template["object" === typeof g ? "render" : "compile"].apply(template, arguments)
        };
        //新手帮助提示
        var helpTemp = '<div id="help">' +
                '<a href="javascript:;" class="close" title="关闭新手帮助">×</a>' +
                '<div id="step1" class="step" step="1" style="position:relative;left:50%;top:50%;margin-left:-160px;margin-top:-60px;width:280px;height:100px">' +
                '<p style="text-align:center">' +
                '<span class="h2">欢迎使用提示</span>' +
                '<br>下面我会简单介绍下如何使用，以便你快速上手<br>' +
                '<a href="javascript:;" class="next">下一步</a>' +
                '</p>' +
                '</div>' +
                '<div id="step2" class="step" step="2" style="top:90px;left:140px;width:350px">' +
                '<b class="jt jt_left" style="left:-40px;top:20px"></b>' +
                '<p>' +
                '<span class="h1">①</span><span class="h2">工具栏</span>' +
                '<br>工具栏使用简介<br>' +
                '<a href="javascript:;" class="next">下一步</a>' +
                '</p>' +
                '</div>' +
                '<div id="step3" class="step" step="3" style="top:90px;left:550px;width:250px">' +
                '<b class="jt jt_top" style="top:-40px;left:30px"></b>' +
                '<p>' +
                '<span class="h1">②</span><span class="h2">选项卡</span>' +
                '<br>选项卡使用简介<br>' +
                '<a href="javascript:;" class="next">下一步</a>' +
                '</p>' +
                '</div>' +
                '<div id="step4" class="step" step="4" style="top:130px;left:550px;width:250px">' +
                '<b class="jt jt_top" style="top:-40px;left:30px"></b>' +
                '<p>' +
                '<span class="h1">③</span><span class="h2">导航栏</span>' +
                '<br>导航栏使用简介<br>' +
                '<a href="javascript:;" class="next">下一步</a>' +
                '</p>' +
                '</div>' +
                '<div id="step5" class="step" step="5" style="bottom:50px;left:550px;width:250px">' +
                '<b class="jt jt_bottom" style="bottom:-40px;left:30px"></b>' +
                '<p>' +
                '<span class="h1">④</span><span class="h2">任务栏</span>' +
                '<br>这个就不用我介绍了吧 =)<br>' +
                '<a href="javascript:;" class="over">&nbsp;完&nbsp;成&nbsp;</a>' +
                '</p>' +
                '</div>' +
                '</div>';
        function a() {

            if (!$.browser.msie || ($.browser.msie && $.browser.version < 9)) {
                $('body').append(helpTemp);
                //IE6,7,8基本就告别新手帮助了
                $('#step1').show();
                $('.close').on('click', function () {
                    $('#help').remove();
                });
                $('.next').on('click', function () {
                    var obj = $(this).parents('.step');
                    var step = obj.attr('step');
                    obj.hide();
                    $('#step' + (parseInt(step) + 1)).show();
                });
                $('.over').on('click', function () {
                    $('#help').remove();
                });
            }

        }
    </script>
</head>

<body onload="a()">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="z-index: 9999999;width: 100px;height: 100px;border: 1px solid #FFFFFF">123</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
